<template>
<div>
 <Row>
   <Col span="4" >
            <mu-paper :z-depth="3">
              <mu-list>
                <mu-sub-header>鲜花公告</mu-sub-header>
                <mu-list-item avatar>
                  <mu-list-item-content>
                    <mu-list-item-title>
                     今日鲜花份新鲜
                    </mu-list-item-title>
                  </mu-list-item-content>
                </mu-list-item>
              </mu-list>
            </mu-paper>
      </Col>
      <Col span="20" style="left: 40px">

        <Row :gutter="20">
          <Col style="float: left;width: 20%;">
            <div  >
              <mu-card style="width: 100%; max-width: 375px; " raised>
                <mu-card-header title="昵称" sub-title="sub title">
                  <mu-avatar slot="avatar">
                  </mu-avatar>
                </mu-card-header>
                <mu-card-media title="玫瑰花" sub-title="花中仙子">
                  <img src="../static/鲜花1.jpg" height="200" width="200"/></mu-card-media>
                <mu-card-text>
                  散落在指尖的阳光，我试着轻轻抓住光影的踪迹，它却在眉宇间投下一片淡淡的阴影。
                  调皮的阳光掀动了四月的心帘，温暖如约的歌声渐起。
                  似乎在诉说着，我也可以在漆黑的角落里，找到阴影背后的阳光，
                  找到阳光与阴影奏出和谐的旋律。我要用一颗敏感赤诚的心迎接每一缕滑过指尖的阳光！
                </mu-card-text>
                <mu-card-actions>
                  <mu-button color="primary"  flat @click="openSimpleDialog = true">购买</mu-button>
                 <mu-dialog title="购买" width="360" :open.sync="openSimpleDialog">
                   <mu-form ref="form" :model="validateForm" class="mu-demo-form">
                     <mu-form-item label="收货人"  prop="username" :rules="usernameRules">
                       <mu-text-field v-model="validateForm.username" prop="username"></mu-text-field>
                     </mu-form-item>
                     <mu-form-item label="收货地址"  prop="site" :rules="usernameRules">
                       <mu-text-field v-model="validateForm.site" prop="site"></mu-text-field>
                     </mu-form-item>
                     <mu-form-item label="邮箱"  prop="mailbox" :rules="usernameRules">
                       <mu-text-field v-model="validateForm.mailbox" prop="mailbox"></mu-text-field>
                     </mu-form-item>
                     <mu-form-item label="电话" prop="phone" :rules="phoneRules">
                       <mu-text-field type="text" v-model="validateForm.phone" prop="phone"></mu-text-field>
                     </mu-form-item>
                     <mu-form-item prop="isAgree" :rules="argeeRules">
                       <mu-checkbox label="同意用户协议" v-model="validateForm.isAgree"></mu-checkbox>
                     </mu-form-item>
                     <mu-form-item>
                       <mu-button color="primary" @click="submit">提交</mu-button>
                       <mu-button @click="clear">重置</mu-button>
                     </mu-form-item>
                   </mu-form>
                 </mu-dialog>
                </mu-card-actions>
              </mu-card>
            </div>
          </Col>
        </Row>
      </Col>
 </Row>
</div>
</template>

<script>
export default {
  name: "manage",
  data(){
    return {
      openSimpleDialog:false,
      value1:0,
      openSimple: false,
      zhucer:false,
      formInline: {
        user: '',
        password: ''
      },
      ruleInline: {
        user: [
          { required: true, message: '请输入账号...', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码...', trigger: 'blur' },
          { type: 'string', min: 6,max:20, message: '密码不能少于6位数，不能多于20位数', trigger: 'blur' }
        ]
      },
      usernameRules: [
        { validate: (val) => !!val, message: '必须填写用户名'},
        { validate: (val) => val.length >= 3, message: '用户名长度大于3'}
      ],
      phoneRules: [
        { validate: (val) => !!val, message: '必须填写电话'},
        // { validate: (val) => val.length >= 3 && val.length <= 10, message: '密码长度大于3小于10'}
      ],
      argeeRules: [{ validate: (val) => !!val, message: '必须同意用户协议'}],
      validateForm: {
        username: '',//收货人
        phone: '',//电话
        mailbox:'',//邮箱
        site:'',//收货地址
        isAgree: false
      }
    };
  },
  methods: {
    openSimpleDialog() {
      this.openSimple = true;
    },
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.openSimple = false;
          this.$Message.success('登录成功!');
        } else {
          this.$Message.error('登陆失败!');
        }
      })
    },
    zhucer1() {
      this.zhucer = true
    },
    submit() {
      this.$refs.form.validate().then((result) => {
        console.log("isAgreed" + result)
      })
    },
    clear() {
      this.$refs.form.clear();
      this.validateForm = {
        username: '',//收货人
        phone: '',//电话
        mailbox: '',//邮箱
        site: '',//收货地址
        isAgreed: '',
      }
    }
  }
}
</script>

<style scoped>

</style>